<template>
  <div class="page">
    <div class="main">
      <div class="top">
        <h1>{{form.responseName}}</h1>
      </div>
      <DialogForm ref="formComponent" :formConfig="formConfig" />
      <div style="margin-top:30px">
        <LsdTable slot="cxyq" :compRef="tableList.compRef" ref="gjxm" :columns="tableList.columns" :tableData="tableList.tableData" :tableAttr="tableList.tableAttr" :isSequenceFlag="tableList.isSequenceFlag" />
      </div>
      <div style="margin-top:30px">
        <DialogForm ref="formComponent1" :formConfig="formConfig1" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getinfo
} from "@/api/EmergencyDisposal/xymld";
export default {
  name: "EmergencyResponsepreview",
  components: {},
  props: {
    previewVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: function () {
        return "";
      }
    }
  },
  data() {
    return {
      // 弹窗表单信息
      formConfig1: {
        formData: [
          {
            type: "select",
            label: "联系人",
            prop: "linkman",
            dic: "dic_lxr",
            class: "sjgy",
            lableWidth: "120px",
            isDisabled: true,
            isShow: true,
            option: [
              {
                label: "专项应急办: 俞斌137888802",
                value: "专项应急办: 俞斌137888802"
              },
              {
                label: "专项应急办: 付婧1384665802",
                value: "专项应急办: 付婧1384665802"
              },
              {
                label: "专项应急办: 赵爱国1569858802",
                value: "专项应急办: 赵爱国1569858802"
              }
            ]
          },
          {
            type: "select",
            label: "抄报",
            prop: "outTheNewspaper",
            dic: "dic_cb",
            class: "half",
            lableWidth: "120px",
            isDisabled: true,
            isShow: true,
            option: [
              {
                value: "1",
                label: "湖北省应急厅"
              },
              {
                value: "2",
                label: "湖北省能源厅"
              }
            ]
          },
          {
            type: "select",
            label: "抄送",
            prop: "sendDuplicate",
            dic: "dic_cs",
            class: "half",
            lableWidth: "120px",
            isDisabled: true,
            isShow: true,
            option: [
              {
                value: "1",
                label: "国网湖北省电力有限公司"
              },
              {
                value: "2",
                label: "国网湖北省电力有限公司安监部"
              }
            ]
          }
        ]
      },
      tableList: {
        isSelectFlag: true,
        compRef: "cxyq",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "响应命令单列表",
        actions: [],
        tableData: [
          {
            measureRequire: "",
            unitDeptId: ""
          }
        ],
        columns: [
          {
            prop: "measureRequire",
            label: "有关措施要求",
            align: "center",
            "min-width": "200px"
          },
          {
            prop: "unitDeptId",
            label: "部门/单位",
            align: "center",
            "min-width": "70px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      id: "unitDeptId",
                      label: "部门/单位",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: true,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.dwjbmlist
                      // [
                      // {
                      //   label: "111",
                      //   value: 1
                      // },
                      // {
                      //   label: "222",
                      //   value: 2
                      // },
                      // {
                      //   label: "333",
                      //   value: 3
                      // }
                      // ]
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          }
        ],
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 弹窗表单信息
      formConfig: {
        formData: [
          {
            type: "input",
            label: "签发人",
            prop: "approvalUser",
            class: "half",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "时间",
            prop: "createTime",
            class: "half",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "select",
            label: "主送单位",
            prop: "mainUnitId",
            dic: "mainUnitId",
            class: "sjgy",
            lableWidth: "120px",
            isDisabled: true,
            isShow: true,
            option: [
              {
                value: "1",
                label: "国网随电公司"
              },
              {
                value: "2",
                label: "国网随州供电公司公司"
              },
              {
                value: "3",
                label: "国网公司"
              }
            ]
          },
          {
            type: "select",
            label: "响应部门",
            prop: "responseDeptId",
            dic: "dic_xybm",
            class: "sjgy",
            lableWidth: "120px",
            isDisabled: true,
            isShow: true,
            option: [
              {
                value: "1",
                label: "办公室"
              },
              {
                value: "2",
                label: "设备部"
              },
              {
                value: "3",
                label: "安监部"
              }
            ]
          },
          {
            type: "input",
            label: "事件类别",
            prop: "eventName",
            class: "half",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "响应级别",
            prop: "responseLvName",
            class: "half",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "影响范围",
            prop: "effectRange",
            class: "half",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "影响时间",
            prop: "effectTime",
            class: "half",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "信息来源",
            prop: "xxly",
            class: "sjgy",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "textarea",
            label: "事件概要",
            prop: "incidentOutline",
            class: "sjgy",
            isDisabled: true,
            lableWidth: "120px"
          }
        ]
      },
      title: "",
      spxxform: {},
      tbxxform: {},
      cslist: [],
      cblist: [],
      lxrlist: [],
      xybmlist: [],
      xyxxform: {},
      zsdwlist: [],
      form: {},
      tableData: [],
      dwjbmlist: [
        {
          value: "1",
          label: "办公室"
        },
        {
          value: "2",
          label: "设备部"
        },
        {
          value: "3",
          label: "安监部"
        }
      ]


    };
  },
  watch: {
    previewVisible: {
      handler(val) {
        if (val) {
          this.getinfo();
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    async getinfo() {
      const res = await getinfo({ id: this.id });
      this.form = res;
      this.$set(this.$refs.formComponent1, "form", res);
      this.$set(this.$refs.formComponent, "form", res);
      this.tableList.tableData = res.emergencyMeasureListVos;
    }
  }
};
</script>

<style scoped lang="less">
.top {
  text-align: center;
  width: 50%;
  margin-left: 22%;
  margin-bottom: 30px;
}
.title {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}
.card {
  margin-bottom: 20px;
  p {
    font-size: 16px;
    margin-top: 12px;
  }
}
.content {
  width: 90%;
  position: relative;
  left: 5%;
  p {
    font-size: 16px;
    margin-top: 25px;
  }
  table tr td {
    border: 1px solid #000;
    font-size: 12px;
    text-align: center;
    padding: 10px;
  }
}
</style>
